<template>
    
    <router-view v-slot="{ Component }">
        <transition>
            <keep-alive exclude="Detail,Address,AddressEdit">
                <component :is="Component" />
            </keep-alive>
        </transition>
    </router-view>
    
    
     <!--<router-view/>-->
    <div id="nav">
        
        <router-link class="tab-bar-item" to="/">
            <div class="icon">
                <i class="iconfont icon-shouye"></i>
            </div>
            <div>首页</div>
        </router-link>

        <router-link class="tab-bar-item" to="/category">
            <div class="icon">
                <i class="iconfont icon-fenlei"></i>
            </div>
            <div>分类</div>
        </router-link>
        
        
        <router-link class="tab-bar-item" to="/shopcart">
            <div class="icon">
                <!-- 徽标 -->
                <van-badge :show-zero="false" :content="$store.state.cartCount" max="99">
                <i class="iconfont icon-gouwuche"></i>
                </van-badge>
                <!-- 徽标结束 -->
            </div>
            <div>购物车</div>
        </router-link>
        

        <router-link class="tab-bar-item" to="/profile">
            <div class="icon">
                <i class="iconfont icon-gerenzhongxin"></i>
            </div>
            <div>我的</div>
        </router-link>
    
    </div>
    
</template>

<script>
import {onMounted} from 'vue';
import {useStore} from 'vuex';
export default {
    setup() {
        const store = useStore();
        onMounted(()=>{
            
            store.dispatch('updateCart');
            
        })
    }
}
</script>

<style lang="scss">

@import "assets/css/base.css";
@import "//at.alicdn.com/t/font_3252582_lbvucgwm52m.css";

#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

#nav {
    display: flex;
    background-color: #F6F6F6;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    box-shadow: 0 -1px 5px rgba(0,0,0,.2);
    
    a {
        color: var(--color-text);
        
        &.router-link-exact-active {
            color: var(--color-high-text);
        }
    }
    
    .tab-bar-item {
        flex: 1;
        height: 50px;
        text-align: center;
        font-size: var(--font-size);
    }
    
    .tab-bar-item .icon {
        width: 24px;
        height: 24px;
        margin-top: 5px;
        display: inline-block;
        vertical-align: center;
    }
}
</style>
